<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提示工具</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="jquery-3.2.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h4>提示工具(Tooltip)插件-锚</h4>
    <a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的Tooltip">默认的Tooltip</a>
    <a href="#" class="tooltip-test" data-toggle="tooltip" title="左侧的Tooltip" data-placement="left">左侧的Tooltip</a>
    <a href="#" class="tooltip-test" data-toggle="tooltip" title="顶部的Tooltip" data-placement="top">顶部的Tooltip</a>
    <a href="#" class="tooltip-test" data-toggle="tooltip" title="底部的Tooltip" data-placement="bottom">底部的Tooltip</a>
    <a href="#" class="tooltip-test" data-toggle="tooltip" title="右侧的Tooltip" data-placement="right">右侧的Tooltip</a><br>

    <h4>提示工具（Tooltip）插件 - 按钮</h4>
    <button type="button" class="btn btn-default" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip" data-trigger="click" data-delay="1000">左侧的 Tooltip</button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip" data-trigger="focus">顶部的 Tooltip</button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip" data-trigger="hover">底部的 Tooltip</button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip" data-trigger="manual">右侧的 Tooltip</button><br>

    这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" title="show">Tooltip 方法 show   </a>.

    这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip 方法 hide   </a>.

    这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip 方法 destroy   </a>.

    这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Tooltip 方法 toggle   </a>. <br><br><br><br><br><br>
    <p class="tooltip-options" >这是一个 <a href="#" data-toggle="tooltip" title="<h2>am Header2 </h2>">Tooltip 方法 options      </a>.  </p>
</div>


<script>
    $(function () { $("[data-toggle='tooltip']").tooltip(); });
    $(function () {
        $('.tooltip-show').tooltip('show');
    })
    $(function () {
        $('.tooltip-hide').tooltip('hide');
    });
    $(function () {
        $('.tooltip-destroy').tooltip('destroy');
    })
    $(function () {
        $('.tooltip-toggle').tooltip('toggle');
    })
    $(function () {
        $(".tooltip-options a").tooltip({
            html:true
        });
    });
    $(function () {
       $(".tooltip-hide").on("show.bs.tooltip",function () {
           alert("Alert message on show");
       });
    });
</script>
</body>
</html>